// 如果是class组件，没法使用hook，只能使用另外的方式来进行 react-redux的使用
// 前2步是一样的
// 第三步，是使用  connect 函数对数据进行获取 ，使用connect将 后代组件进行一层包装

import React, { Component } from "react";
import { connect, Provider } from "react-redux";
import store from "./store";

export default class App2 extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>App2</div>
        <Com />
      </Provider>
    );
  }
}

// 后代组件
class Child extends Component {
  onClick() {
    this.props.add();
  }
  reduceFn() {
    this.props.reduce();
  }
  render() {
    return (
      <div>
        <p>Child</p>
        {/* 获取store里面的数据 ， 可以直接通过 props 获取 */}
        <p>{this.props.count}</p>
        <button onClick={this.onClick.bind(this)}>+1</button>
        <button onClick={this.reduceFn.bind(this)}>-1</button>
      </div>
    );
  }
}
// 使用connect进行后代的包装
// 然后提供两个函数，把 store里面的 数据 和 委托 映射到 props 上
// 将state里面的数据映射到 props上
const mapStateToProps = (state) => {
  return {
    count: state.count,
    name: state.name,
  };
};
// 将 state里面的 数据操作映射到 props 上
const mapDispathToProps = (dispatch) => {
  return {
    add() {
      dispatch({ type: "add" });
    },
    reduce() {
      dispatch({ type: "reduce" });
    },
  };
};
const Com = connect(mapStateToProps, mapDispathToProps)(Child); // 高阶组件的用法
